●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Time-series SVG line chart with interactive data points and hover tooltip
- Period selector (7D / 30D / 90D) to filter chart and referrer data
- Top referrers list with clicks, percentage of total, and inline progress bars
- Client-side mock data generation and filtering logic for demo purposes
- Simple tooltip positioning using mouse events and IJSRuntime placeholder
- Tailwind-based responsive container and card layout
## Key components
- DashboardPage.razor (page shell, period buttons, data filtering)
- TimeSeriesChart.razor (SVG polyline, <circle> points, tooltip state, OnParametersSet)
- ReferrersList.razor (list/table layout, percentage bars)
- DashboardModels.cs (ChartDataPoint, ReferrerData records)
- Uses @onclick, @onmouseover, @onmousemove, ElementReference, IJSRuntime injection
## How it works
- OnInitialized calls GenerateMockData then FilterDataForPeriod to populate allChartData and allReferrerData.
- SetPeriod updates selectedPeriod and re-filters chartDataForPeriod and referrersForPeriod.
- Dashboard passes filtered lists to TimeSeriesChart and ReferrersList via [Parameter].
- TimeSeriesChart computes SVG path and point coordinates in OnParametersSet and renders a polyline and circles. Hover handlers toggle a tooltip and update coordinates using MouseEventArgs; a comment notes where JS interop should compute precise positions.
- ReferrersList computes percentage of total clicks and renders small inline progress bars with Tailwind classes.
## Styling
- Tailwind utility classes drive spacing, colors, typography and responsiveness (bg-gray-100, max-w-7xl, flex, p-6, h-72).
- SVG uses fixed viewBox dimensions (500x200) and responsive width/height via CSS container; consider using responsive SVG scaling for varied aspect ratios.
## Reuse steps
1. Add the three Razor components and DashboardModels.cs to a Blazor Server or WebAssembly project.
2. Ensure Tailwind CSS or equivalent utility stylesheet is included, or replace classes with project CSS.
3. No extra NuGet packages required for the demo; IJSRuntime is available in Blazor by default.
4. Replace GenerateMockData with injected services (e.g., HttpClient or application data services) in Program.cs/Startup.
5. Improve tooltip positioning by adding a small JS interop helper to compute container bounding rect and translate client coordinates to SVG/local coords.
6. Add accessibility attributes (aria-labels, roles) and unit/component tests as needed.
## Limitations & next steps
- Demo uses in-memory mock data; backend wiring, paging, caching, and auth are not implemented.
- Tooltip positioning uses client coordinates and is approximate; add JS to compute accurate offsets inside SVG.
- Chart scaling assumes clicks > 0 and linear scaling; add axis labels, gridlines, and configurable scales for production use.
- No export, zoom, pan, or real-time updates; consider integrating a charting library if advanced interaction or performance is required.
- Add localization, keyboard interaction, and automated tests before production use.